import { DatePicker, Button, Space } from '@pxxtech/mobile';
import { toTime } from '@pxxtech/utils';
import { DemoBlock } from 'demos';
import { useState } from 'react';

function RenderChildrenDemo() {
  const [value, setValue] = useState<Date | null>(new Date());
  return (
    <Space direction="vertical">
      <DatePicker value={value ?? undefined} onChange={setValue} />
      <div>回显：{toTime(value)}</div>
    </Space>
  );
}

// 控制选择精度
function Precision() {
  return (
    <Space direction="vertical">
      <DatePicker precision="year" placeholder="年" />
      <DatePicker precision="month" placeholder="年-月" />
      <DatePicker precision="day" placeholder="年-月-日" />
      <DatePicker precision="hour" placeholder="年-月-日-时" />
      <DatePicker precision="minute" placeholder="年-月-日-时-分" />
      <DatePicker precision="second" placeholder="年-月-日-时-分-秒" />
    </Space>
  );
}

export default () => {
  return (
    <>
      <DemoBlock title="基础用法">
        <DatePicker />
      </DemoBlock>
      <DemoBlock title="渲染所选值">
        <RenderChildrenDemo />
      </DemoBlock>
      <DemoBlock title="控制选择精度">
        <Precision />
      </DemoBlock>
      <DemoBlock title="自定义选择框">
        <DatePicker>
          {(value: Date | null) => <Button>{toTime(value) ?? '选择'}</Button>}
        </DatePicker>
      </DemoBlock>
    </>
  );
};
